<template>
    <van-popup v-model:show="setat.open" position="right" :duration="0.2" close-icon="arrow-left"
        close-icon-position="top-left" closeable :style="{
            height: '100%',
            width: '100%',
            background: `#fff`,
        }">
        <div class="language">{{ $t("layout.language") }}</div>
        <van-radio-group v-model="setat.checked">
            <van-cell-group inset>
                <van-cell :title="item.name" clickable @click="toggleLanguage(item.locale)"
                    v-for="(item, index) in setat.languageList" :key="index">
                    <template #right-icon>
                        <van-radio :name="item.locale" checked-color="#FFA000" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </van-popup>
</template>
<script lang="ts">
import { defineComponent, reactive } from "vue";
import { Popup, Cell, CellGroup, RadioGroup, Radio } from "vant";
import { i18n, vantLocales } from "@/i18n/index";
import { AppModule } from "@/store/modules/app";
export default defineComponent({
    components: {
        [Popup.name]: Popup,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio,
    },
    setup() {
        const setat = reactive({
            open: false,
            checked: i18n.global.locale,
            bg: "",
            languageList: [
                {
                    name: "English",
                    locale: "en",
                },
                {
                    name: "中文",
                    locale: "zh",
                },
                // {
                //   name: "한국인", //韩
                //   locale: "ko",
                // },
                // {
                //     name: "日本", //日
                //     locale: "ja",
                // },
                // {
                //   name: "แบบไทย", //泰
                //   locale: "th",
                // },
                // {
                //   name: "bahasa Indonesia", //印尼语
                //   locale: "id",
                // },
            ],
        });
        const toggleLanguage = async (locale: string) => {
            setat.checked = locale;
            i18n.global.locale = locale;
            vantLocales(i18n.global.locale);
            AppModule.toggleLanguage(i18n.global.locale);
            setat.open = false;
        };
        return {
            setat,
            toggleLanguage,
        };
    },
});
</script>
<style lang="less" scoped>
.language {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
}

.van-cell-group--inset {
    margin: 0;
}

.van-radio-group {
    .van-cell-group {
        background: transparent;

        .van-cell {
            background: transparent;
            color: #333;

            &:after {
                opacity: 0.2;
            }
        }
    }
}
</style>
